/*
* @Description:通道管理-新增
* @Author: lil
* @Date: 2021/11/24
**/
<template>
  <div>
    <!-- 表单 -->
    <el-form :model="form" :rules="rules" label-width="83px" ref="form">
      <el-form-item label="通道名称:" prop="name">
        <el-input v-model="form.name" placeholder="请输入通道名称，如chan1" maxlength="6"></el-input>
      </el-form-item>
      <el-form-item label="所在组织:" prop="orgs">
        <template v-if="add.length>0">
          <el-checkbox-group v-model="form.orgs">
            <el-checkbox v-for="(item,index) in add" :key="index" :label="item.name" @change='selectData(item)'>
            </el-checkbox>
          </el-checkbox-group>
        </template>
        <template v-else>
          暂无组织可选
        </template>
      </el-form-item>
      <el-form-item label-width="0" class="btns">
        <el-button type="primary" :disabled="add.length==0" v-if="title=='新增'" @click="submitForm('0')">立即创建</el-button>
        <el-button type="primary" v-else @click="submitForm('1')">修改</el-button>
        <el-button type="info" @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {
    addChannel,
    alertChannel
  } from '@/api/blockchain/deploychannel'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        let regex = /^[a-z0-9]+$/g;
        if (value == '') {
          return callback(new Error('通道名称不能为空！'))
        } else if (regex.exec(value)) {
          callback()
        } else {
          return callback(new Error('请输入合法的通道名称，小写字母加数字！'))
        }
      };
      return {
        form: {
          name: '',
          orgs: []
        },
        arr: [],
        oldForm: {
          name: '',
          orgs: []
        },
        rules: {
          name: [{
            required: true,
            validator: validatePass,
            trigger: 'change'
          }],
          orgs: [{
            type: 'array',
            required: true,
            message: '请至少选择一个组织！',
            trigger: 'change'
          }]
        },
      };
    },
    props: {
      add: {
        type: Array,
      },
      channelName: {
        type: String
      },
      orgs: {
        type: String
      },
      title: {
        type: String
      }
    },
    mounted() {
      this.initData();
    },
    methods: {
      initData() {
        if (this.channelName != '') {
          this.form.name = this.channelName;
          this.oldForm.name = this.channelName;
          this.orgs.split(',').forEach((item) => {
            this.form.orgs.push(item);
            this.oldForm.orgs.push(item);
          })
        }
      },
      selectData(val) {
        if (this.arr.indexOf(val.name) == -1) {
          this.arr.push(val.name)
        } else {
          this.arr.splice(this.arr.indexOf(val.name), 1)
        }
        // this.form.orgs = this.arr
      },

      submitForm(val) {
        if (val == 0) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              var _this = this;
              addChannel(_this.form).then(() => {
                  this.$message({
                    type: 'success',
                    message: '添加组织成功！'
                  });
                  this.$emit('closeadd')
                })
                .catch(function (error) {

                })
            }
          })
        } else {
          this.$refs.form.validate((valid) => {
            if (valid) {
              var _this = this;
              alertChannel(_this.oldForm, _this.form).then(() => {
                  this.$message({
                    type: 'success',
                    message: '修改组织成功！'
                  });
                  this.$emit('closeadd')
                })
                .catch(function (error) {

                })
            }
          })
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };

</script>
<style lang="scss" scoped>
  .el-form {
    padding: 40px 40px 10px;

    &>>>.el-form-item__label {
      &::before {
        content: '*';
        display: inline-block;
        color: #f12945;
      }
    }

    .btns {
      text-align: center;
      margin-top: 70px;

      .el-button:nth-of-type(1) {
        margin-right: 40px;
      }
    }
  }

</style>
